<template>
  <jl-base>
    <jl-header>
      <mt-header title="跟进" :fixed="true">
        <i slot="left">
          <mt-button icon="back" @click="back"></mt-button>
        </i>
        <mt-button slot="right" @click="history">跟进记录</mt-button>
      </mt-header>
    </jl-header>

    <jl-content>
      <mt-navbar v-model="selected">
        <mt-tab-item id="base">基本信息</mt-tab-item>
        <mt-tab-item id="goods">商品信息</mt-tab-item>
      </mt-navbar>

      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="base">
          <div class="w12">
            <div class="dld_title"><span>基本资料</span></div>
            <div class="dld_body">
              <div class="jl_form">
                <div class="jl_form_item bor_bottom">
                  <span class="w04"><em class="font_red">*</em>厂家业务员</span>
                  <span class="w08 tr"></span>
                  <i class="fa fa-angle-right"></i>
                </div>
              </div>
              <div class="jl_form">
                <div class="jl_form_item bor_bottom">
                  <span class="w04">经销商业务员</span>
                  <span class="w08 tr"></span>
                  <i class="fa fa-angle-right"></i>
                </div>
              </div>
              <div class="jl_input">
                <div class="jl_input_item pr10 bor_bottom">
                  <span class="w06">经销商业务员电话</span>
                  <input class="w06"/>
                </div>
              </div>
              <div class="jl_form">
                <div class="jl_form_item bor_bottom">
                  <span class="w04"><em class="font_red">*</em>工程用途</span>
                  <span class="w08 tr"></span>
                  <i class="fa fa-angle-right"></i>
                </div>
              </div>
              <div class="w12">
                <div class="jl_list">
                  <div class="jl_list_item">
                    <span class="w12"><em class="font_red">*</em>上传登录照片(最多5张)</span>
                  </div>
                </div>
                <div class="w12 list_up_img">
                  <div class="img_item bor_bottom">
                    <div class="img_case"><img src="../../../static/imgs/userPic.png"></div>
                    <div class="img_case"><img src="../../../static/imgs/userPic.png"></div>
                    <div class="img_case"><img src="../../../static/imgs/userPic.png"></div>
                    <div class="img_case"><img src="../../../static/imgs/userPic.png"></div>
                    <i class="fa fa-camera"></i>
                  </div>
                </div>
              </div>
              <div class="jl_input">
                <div class="jl_input_item pr10">
                  <span class="w04">工程描述</span>
                  <textarea class="w08 tr" placeholder="请输入工程描述。"></textarea>
                </div>
              </div>
            </div>
          </div>
          <div class="w12">
            <div class="dld_title"><span>使用单位</span></div>
            <div class="dld_body">
              <jl-from-input label="单位名称" :value="formData.SYDW" disabled></jl-from-input>
              <div class="jl_input">
                <div class="jl_input_item pr10 bor_bottom">
                  <span class="w04"><em class="font_red">*</em>单位名称</span>
                  <input class="w08 tr" placeholder="请输入使用单位名称"/>
                </div>
              </div>
              <div class="jl_input">
                <div class="jl_input_item pr10 bor_bottom">
                  <span class="w04"><em class="font_red">*</em>单位电话</span>
                  <input class="w08 tr" placeholder="请输入使用单位电话"/>
                </div>
              </div>
              <div class="jl_form">
                <div class="jl_form_item">
                  <span class="w04"><em class="font_red">*</em>单位地址</span>
                  <span class="w08 tr">请选择省市区</span>
                  <i class="fa fa-angle-right"></i>
                </div>
                <textarea class="w12 pr15 mb10 tr" placeholder="请输入详细地址，街道，门牌号等。"></textarea>
              </div>
            </div>
          </div>
          <div class="w12">
            <div class="dld_title"><span>购买单位</span></div>
            <div class="dld_body">
              <div class="jl_input">
                <div class="jl_input_item pr10 bor_bottom">
                  <span class="w04"><em class="font_red">*</em>单位名称</span>
                  <input class="w08 tr" placeholder="请输入使用单位名称"/>
                </div>
              </div>
              <div class="jl_input">
                <div class="jl_input_item pr10 bor_bottom">
                  <span class="w04"><em class="font_red">*</em>单位电话</span>
                  <input class="w08 tr" placeholder="请输入使用单位电话"/>
                </div>
              </div>
              <div class="jl_form">
                <div class="jl_form_item">
                  <span class="w04"><em class="font_red">*</em>单位地址</span>
                  <span class="w08 tr">请选择省市区</span>
                  <i class="fa fa-angle-right"></i>
                </div>
                <textarea class="w12 pr15 mb10 tr" placeholder="请输入详细地址，街道，门牌号等。"></textarea>
              </div>
            </div>
          </div>

          <template v-for="(item,index) in formData.AZDZLB">
            <div class="w12">
              <div class="dld_title">
                <span>安装地址（{{index + 1}}）</span>
                <i class="fa fa-trash font_color font_size_large fr" @click="delAddress(index)"></i>
              </div>
              <div class="dld_body">
                <jl-from-input label="联系人" required placeholder="请输入安装地址联系人" v-model="item.LXR"/>
                <jl-from-input label="联系电话" required placeholder="请输入安装地址联系人电话" v-model="item.LXDH"/>
                <jl-address label="安装地址" required
                            v-model="item.AZDZ"
                />
              </div>
            </div>
          </template>
          <!--<div class="dld_add">+ 添加安装地址</div>-->
        </mt-tab-container-item>

        <mt-tab-container-item id="goods">
          <template v-for="(item,index) in formData.SPLB">
            <div class="w12">
              <div class="dld_title"><span>商品信息({{index+1}})</span>
                <i class="fa fa-trash font_color font_size_large fr" @click="removeGoods(index)"></i>
              </div>
              <div class="dld_body">
                <div class="jl_form">
                  <div class="jl_form_item bor_bottom">
                    <span class="w04"><em class="font_red">*</em>商品名称</span>
                    <span class="w08 tr">{{item['GCSPMC']}}</span>
                    <i class="fa fa-search-plus"></i>
                  </div>
                </div>
                <div class="jl_input">
                  <div class="jl_input_item pr10 bor_bottom">
                      <span class="w08">
                        <em class="font_red">*</em>申请数量
                      </span>
                    <nut-stepper
                      :value.sync="item.SQSL"
                      :min="1"
                    ></nut-stepper>
                  </div>
                </div>
                <jl-from-textarea required placeholder="请输入商品备注信息" v-model="item.BZ"/>
              </div>
            </div>
          </template>
          <!--<div class="dld_add">+ 添加商品</div>-->
          <!--<div class="dld_title"><span>合计：3件商品。</span></div>-->
        </mt-tab-container-item>
      </mt-tab-container>

    </jl-content>
    <jl-footer>
      <template v-if="selected == 'goods'">
        <div class="dld_title" style="background-color: #f1f1f1;"><span>合计：{{formData.SPLB.length}}件商品。</span></div>
      </template>
      <div class="footer_btn pr20 pl20">
        <button class="w12 ml0">提交</button>
      </div>
    </jl-footer>
  </jl-base>
</template>

<script>

  export default {
    data() {
      return {
        selected: 'base',
        jlbh: '',
        bdbh: '',
        formData: {
          SPLB: []
        }
      }
    },
    methods: {
      back() {
        this.$router.back()
      },
      history() {
        this.$router.push('/agent/start/history')
      },
      initData() {
        this.http.find('SCM_GCDLD', {
          bdbh: this.bdbh,
          jlbh: this.jlbh
        }).then(v => {
          if ($Utils.isNull(v)) return
          Object.assign(this.formData, v[0])
        }).catch(e => console.log(e))
      }
    },
    created() {
      this.jlbh = new Number(this.$route.query.jlbh)
      this.bdbh = this.$route.query.bdbh
    },
    mounted() {
      this.initData()
    }
  }
</script>

<style scoped>

</style>
